<template>
  <view class="x-textarea" :style="{'height': height + 'rpx'}">
    <textarea
      class="_textarea"
      :style="styles"
      :value="inputValue"
      :placeholder-class="placeholderClass"
      :placeholder="placeholder"
      :maxlength="maxlength"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @confirm="onConfirm"
    />
    <view v-if="showCount" class="_show_count">{{ count }}/{{ maxlength }}</view>
  </view>
</template>

<script>
export default {
  name: 'XTextarea',
  components: {},
  props: {
    background: {
      type: String,
      default: '#ffffff'
    },
    styles: {
      type: String,
      default: ''
    },
    // 输入框的初始内容
    value: {
      type: String,
      value: ''
    },
    // 高
    height: {
      type: Number,
      default: 300
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    placeholderClass: {
      type: String,
      default: 'input-placeholder'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    showCount: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: 140
    }
  },
  data() {
    return {
      inputValue: ''
    };
  },
  computed: {
    count() {
      return this.value ? this.value.length : 0;
    }
  },
  watch: {
    value(val) {
      this.inputValue = val;
    }
  },
  created() {
    this.inputValue = this.value;
  },
  methods: {
    onInput({ target }) {
      // console.log(...arguments)
      this.inputValue = target.value;
      this.$emit('update:value', target.value);
      this.$emit('input', this.inputValue, target);
    },
    onFocus() {
      this.$emit('focus', this.inputValue);
    },
    onBlur() {
      this.$emit('blur', this.inputValue);
    },
    onConfirm() {
      this.$emit('confirm', this.inputValue);
    }
  }
};
</script>

<style lang="scss">
  .x-textarea{
    display: flex; flex-direction: column; padding: 20px 0;
    ._textarea{ flex: 1; width: 100%; height: 100%; font-size: 30px; line-height: $uni-height-size-mini; background: transparent; color: $uni-text-color;}
    ._show_count{ color: #999; font-size: 24px; text-align: right; line-height: 1;}
  }
  .input-placeholder-apprise {
    color: #B3B3B3;
  }
</style>
